@import '@angular-mdc/theme/scss/rtl/mixins';

:host {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drawer-content {
  position: relative;
}

.drawer {
  border-right-width: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  right: 0;
  left: initial;
  bottom: 0;
  z-index: 3;
}

:host::ng-deep .drawer.mdc-drawer--modal + .mdc-drawer-scrim {
  z-index: 2;
}

.drawer-app-content {
  margin-left: 0 !important;
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
}

.mdc-drawer--animate {
  transform: translateX(100%) !important;

  @include mdc-rtl {
    transform: translateX(-100%) !important;
  }
}

.mdc-drawer--opening {
  transform: translateX(0) !important;
}

.mdc-drawer--closing {
  transform: translateX(100%) !important;

  @include mdc-rtl {
    transform: translateX(-100%) !important;
  }
}

.drawer-options {
  padding: 20px 16px;

  button {
    margin-right: 8px;
  }
}

.gridster-toolbar {
  padding: 16px 8px;
  position: relative;
  border-right: 1px solid rgba(0, 0, 0, 0.12);

  button {
    display: block;
  }
}

.gridster-wrapper {
  flex: 1;
}